<template>
  <view>
    <view class="content_getBack">
      <view class="getBack">
        <navigator open-type="navigateBack" hover-class="none">
          <image src="../../../static/s1.png" mode=""></image>
        </navigator>
        <view class="title">银行卡</view>
      </view>
    </view>
    <view
      class="yinhang"
      :style="'background-color: #' + item.color"
      v-for="(item, i) in cardList"
      :key="i"
    >
      <view class="yinghang_left">
        <view class="imgW">
          <image :src="item.image" mode="widthFix" style="width: 48rpx"></image>
        </view>
        <view class="ka">
          <view style="font-size: 31rpx">{{ item.bank_name }}</view>
          <view style="font-size: 22rpx; padding-top: 5rpx">{{
            item.card_type
          }}</view>
        </view>
      </view>
      <view class="Cardnumber">{{ item.card_num }}</view>
    </view>
    <navigator url="../Addbankcard/Addbankcard" class="Addbankcard">
      <view class="jia">+</view>
      <view class="add">添加银行卡</view>
    </navigator>
  </view>
</template>

<script>
export default {
  data() {
    return {
      token: "",
      cardList: [],
    };
  },
  onLoad() {
    this.token = uni.getStorageSync("token");
  },
  onShow() {
    this.getcardList();
  },

  methods: {
	//   获取银行卡数据
    async getcardList() {
      const res = await this.$myRequest({
        url: "bank/getBankCard",
        method: "POST",
        data: {},
      });
      if (res.data.code == 1) {
        this.cardList = res.data.data;
      } else {
        uni.showToast({
          title: res.data.msg,
          icon: "none",
        });
      }
    },
  },
};
</script>

<style lang="scss">
page {
  background-color: #eeeeee;
}
.content_getBack {
  // position: fixed;
  top: 0;
  // left: 0;
  width: 100%;
  height: 90rpx;
  z-index: 999;
  border-bottom: none !important;
}
.getBack {
  position: relative;
  width: 100%;
  height: 90rpx;
  background: #c52b2e;
  border-bottom: none !important;
}

.getBack .title {
  width: 100%;
  height: 90rpx;
  line-height: 90rpx;
  text-align: center;
  color: #ffffff;
  font-size: 34rpx;
  border-bottom: none !important;
}

.getBack navigator {
  position: absolute;
  left: 0;
  top: 0;
  text-align: center;
  width: 90rpx;
  line-height: 90rpx;
  height: 90rpx;
}

.getBack image {
  width: 21rpx;
  height: 31rpx;
}
.yinhang {
  width: 694rpx;
  height: 201rpx;
  border-radius: 8px;
  margin: 42rpx auto;
  .yinghang_left {
    display: flex;
    align-items: center;
    padding: 17rpx 0 0 22rpx;
	.imgW {
		width: 50rpx;
		height: 50rpx;
		background: #fff;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
    .ka {
      padding-left: 13rpx;
      color: #ffffff;
    }
  }
  .Cardnumber {
    display: flex;
    justify-content: left;
	box-sizing: border-box;
	padding-left: 80rpx;
    font-size: 31rpx;
    color: #ffffff;
    padding-top: 30rpx;
  }
}
.Addbankcard {
  width: 586rpx;
  height: 90rpx;
  border-radius: 17rpx;
  background-color: #ffffff;
  margin: 60rpx auto 0;
  display: flex;
  justify-content: center;
  align-items: center;
  .jia {
    color: #999999;
    font-size: 35rpx;
    padding-right: 20rpx;
  }
  .add {
    font-size: 35rpx;
    color: #333333;
  }
}
</style>
